<template>
    <el-form-item label="数据源" prop="writerDatasourceId">
        <el-select v-model="form.writerDatasourceId" filterable @change="rDsChange">
            <el-option
                    v-for="item in  sourceList.filter(e=>e.datasourceType.indexOf('ftp')==-1)" :key="item.datasourceId"
                    :label="item.datasourceName + '_' + item.datasourceType"
                    :value="item.datasourceId"/>
        </el-select>
    </el-form-item>
    <el-form-item label="数据库表名：" prop="writerTables">
        <el-select v-model="form.writerTables" default-first-option filterable
                   @change="wTbChange">
            <el-option v-for="item in rTbList" :key="item" :label="item" :value="item"/>
        </el-select>
    </el-form-item>
    <el-form-item label="前置SQL语句" prop="preSql">
        <el-input type="textarea" v-model="form.preSql" placeholder="请输入前置SQL语句" clearable/>
    </el-form-item>
    <el-form-item label="后置SQL语句" prop="postSql">
        <el-input type="textarea" v-model="form.postSql" placeholder="请输入后置SQL语句" clearable/>
    </el-form-item>

</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    selectTables,
    selectSchema,
    selectColumns,
    selectTableInfo,
    selectColumnsByQuerySql
} from '@data/api/data/datacollection'
import {ElMessage} from "element-plus";
import { cloneDeep } from 'lodash-es'

const props = defineProps({
    form: {
        type: Object,
        default: () => {
        }
    },
    sourceList: {
        type: Array,
        default: () => []
    },
});
const form = reactive(props.form);
const datasourceType = ref('');
const rTbList = ref([]);

const rDsChange = (e) => {
    // 清空
    form.writerTables = ''
    // form.querySql = ''
    datasourceType.value = props.sourceList.find((item) => item.datasourceId === e).datasourceType;
    getTables('rdbmsWriter')

}

const getTables = (type) => {
    if (type === 'rdbmsWriter') {
        console.log("=======:" + form.writerDatasourceId)
        if (form.writerDatasourceId) {
            let obj = {}
            if (datasourceType.value === 'postgresql' || datasourceType.value === 'oracle') {
                obj = {
                    datasourceId: form.writerDatasourceId,
                    // tableSchema: form.tableSchema
                }
            } else {
                obj = {
                    datasourceId: form.writerDatasourceId
                }
            }
            // 组装
            selectTables(obj).then(response => {
                if (response) {
                    rTbList.value = response.data
                }
            })
        }
    }
}

const wTbChange = (e) => {
    form.preSql = ''
    form.postSql = ''
    form.writerTables = e
    form.tColumnList = []
    getColumns('writer')
}
// 获取表字段
const getColumns = () => {
    const obj = {
        datasourceId: form.writerDatasourceId,
        tableName: form.writerTables
    }
    //1、获取表字段
    selectColumns(obj).then(response => {
        let arr = []
        response.data.forEach(item => {
            arr.push({
                name:item,
                isChecked:false
            })
        })
        form.tColumnListRaw = cloneDeep(arr);
        form.tColumnList = arr
        ElMessage.success('解析成功')
    })
}

onMounted(() => {
  getTables('rdbmsWriter');
})
</script>

<style scoped>

</style>